<template>
  <div class="profile-container">
    <div class="profile-content">
      <div class="profile-header">
        <div class="avatar-wrapper">
          <img :src="userInfo.avatar" alt="用户头像" class="avatar" />
          <div class="avatar-upload">
            <i class="el-icon-camera"></i>
          </div>
        </div>
        <div class="profile-info">
          <!-- <div class="info-item">
            <span class="label">ID</span>
            <span class="value">{{ userInfo.id }}</span>
          </div> -->
          <div class="info-item">
            <span class="label">姓名</span>
            <span class="value">{{ userInfo.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">性别</span>
            <span class="value">{{ userInfo.gender }}</span>
          </div>
          <div class="info-item">
            <span class="label">电话号码</span>
            <span class="value">{{ userInfo.phone }}</span>
          </div>
        </div>
        <div class="edit-button">
          <el-button type="primary" @click="handleEdit">编辑资料</el-button>
        </div>
      </div>
    </div>

    <!-- 编辑资料弹窗 -->
    <el-dialog v-model="dialogVisible" title="编辑资料" width="500px" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="80px" :rules="rules" ref="formRef">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editForm.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="editForm.gender" placeholder="请选择性别" style="width: 100%">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="电话号码" prop="phone">
          <el-input v-model="editForm.phone" placeholder="请输入电话号码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const userInfo = reactive({
  id: '10086',
  name: '杨再军',
  gender: '男',
  phone: '13800138000',
  avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
})

// 弹窗相关
const dialogVisible = ref(false)
const formRef = ref(null)

// 表单数据
const editForm = reactive({
  name: '',
  gender: '',
  phone: '',
})

// 表单验证规则
const rules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
  ],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  phone: [
    { required: true, message: '请输入电话号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
  ],
}

// 打开编辑弹窗
const handleEdit = () => {
  // 初始化表单数据
  editForm.name = userInfo.name
  editForm.gender = userInfo.gender
  editForm.phone = userInfo.phone
  dialogVisible.value = true
}

// 保存编辑
const handleSave = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()
    // 更新用户信息
    userInfo.name = editForm.name
    userInfo.gender = editForm.gender
    userInfo.phone = editForm.phone

    ElMessage.success('保存成功')
    dialogVisible.value = false
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}
</script>

<style scoped lang="scss">
.profile-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: #f5f5f5;
  padding-top: 20px;
}

.profile-content {
  width: 66.67%;
  max-width: 800px;
  min-height: 500px;
  background-color: #fff;
  border-radius: 12px;
  padding: 60px 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}

.avatar-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 50px;

  .avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .avatar-upload {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
  }
}

.profile-info {
  width: 100%;
  max-width: 400px;
  margin-bottom: 30px;

  .info-item {
    display: flex;
    padding: 20px 0;
    border-bottom: 1px solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .label {
      width: 100px;
      color: #666;
      font-size: 16px;
    }

    .value {
      flex: 1;
      color: #333;
      font-size: 16px;
    }
  }
}

.edit-button {
  margin-top: 20px;

  .el-button {
    padding: 12px 30px;
    font-size: 16px;
  }
}

:deep(.el-dialog__body) {
  padding: 20px 30px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
